iT邦幫忙

2024 iThome 鐵人賽

DAY 4
1
Mobile Development

畢業專題拯救計畫系列 第 4

Flutter中的櫃子--layout基本概念2

  • 分享至 

  • xImage
  •  

今天我們要繼續來介紹其他常見的layout widget :

Stack

stack 是一個堆疊 layout ,適合用在彼此重疊的元素上,例如圖片上面有文字及按鈕。

Stack(
          children: [
            Container(
              color: Colors.blue,
              width: double.infinity,
              height: double.infinity,
            ),
            Center(
              child: Text(
                'Stack',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Positioned(
              bottom: 10,
              right: 10,
              child: FloatingActionButton(
                onPressed: () {},
                child: Icon(Icons.add),
              ),
            ),
          ],
        )

https://ithelp.ithome.com.tw/upload/images/20240814/201633221pHUgcU2ds.png

ListView

ListView 用於可上下滑動的垂直或水平列表。它可以輕鬆地處理大量項目,並且支持自定義的列表 layout 。他也是建立動態內容展示的基礎之一,常被用於訊息列表、設置選項、數據記錄等等。

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

https://ithelp.ithome.com.tw/upload/images/20240814/20163322HEuHkPy5Si.png

Container

Container 是一個多功能的容器,可以用來包裝其他 widget。透過 Container,你可以控制子 widget 的大小、邊距、對齊方式、背景顏色、邊框等等。

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text(
    'Container',
    style: TextStyle(color: Colors.white),
  ),
)

https://ithelp.ithome.com.tw/upload/images/20240814/20163322iYatqz2LTb.png

以下是幾種常見的 container 屬性:

  • width: 設置 Container 的寬度。
  • height: 設置 Container 的高度。
  • padding: 設置 Container 內部子 widget 與容器邊界之間的間距。
  • margin: 設置 Container 與其他 widget 之間的外邊距。
  • alignment: 控制子 widget 在 Container 中的對齊方式。
  • color: 設置 Container 的背景顏色。
  • decoration: 用於設置更複雜的裝飾效果,如圓角邊框、陰影等。
  • constraints: 設置 Container 的最大或最小寬高限制。

我們明天見~


上一篇
Flutter中的櫃子--layout基本概念1
下一篇
Flutter中的鎖和鑰匙--Forms and Validation
系列文
畢業專題拯救計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言